<template>
  <el-row class="boxrow">
    <el-col :span="20">
      <i class="el-icon-s-home myicon"></i>
      <span class="fw">{{ item.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row class="myrow">
        <el-col>{{ item.manager }}</el-col>
        <el-col>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="check" v-if="!item.isTop"
                >查看部门</el-dropdown-item
              >
              <el-dropdown-item command="del" v-if="!item.isTop"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDeparrtmentApi } from '../../../api/department'

export default {
  props: ['item'],
  methods: {
    handleCommand (command) {
      if (command === 'add') {
        console.log('添加')
        this.$emit('open-add', this.item)
      } else if (command === 'check') {
        console.log('查看')
        this.$emit('open-edit', this.item)
      } else {
        console.log('删除')
        this.$confirm('此操作将删除除部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delDeparrtmentApi(this.item.id)
          this.$emit('refreshdata')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxrow {
  width: 100%;
  font-size: 14px;
  .myicon {
    margin-right: 6px;
  }
  .fw {
    font-weight: 700;
  }
  .myrow {
    display: flex;
    ::v-deep .el-col {
      text-align: right;
    }
  }
}
</style>
